<template>
	<view class="ps">
		<view class="vip_member">
			<image src="../../static/image/mine/vip_member.png" mode=""></image>
			<view class="vip_info">
				<view class="vip_info_one">
					Merber
				</view>
				<view class="vip_info_rank">
					高级会员
				</view>
				<view class="vip_info_three">
					努力升级会员等级享受更多特权
				</view>
			</view>
			<view class="vip_grade">
				等级说明
			</view>
		</view>
		<!-- 当前会员权益 -->
		<view class="now_vip">
			<view class="now_vip_title">
				当前会员权益
			</view>
			<view class="now_vip_info">
				<view class="now_vip_content">
					<image class="pic_one" src="../../static/image/mine/vip_01.png" mode=""></image>
					<view class="now_vip_content_info">
						<view class="now_vip_content_info_o">
							24小时退换
						</view>
						<view class="now_vip_content_info_t">
							24小时内急速退换货
						</view>
					</view>
				</view>
				<view class="now_vip_content">
					<image class="pic_two" src="../../static/image/mine/vip_02.png" mode=""></image>
					<view class="now_vip_content_info">
						<view class="now_vip_content_info_o">
							积分抵扣
						</view>
						<view class="now_vip_content_info_t">
							积分可抵扣消费金额10%
						</view>
					</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style lang="less" scoped>
	.ps {
		overflow: hidden;
	}
	.vip_member {
		width: calc(100% - 60upx);
		height: 260upx;
		margin:24upx auto;
		position: relative;
		  box-shadow: 0 0 6px 2px #E1E1E1;
		image {
			width: 100%;
			height: 100%;
		}
		.vip_info {
			position: absolute;
			top: 40upx;
			left: 40upx;
			.vip_info_one {
				font-size: 72upx;
				line-height: 72upx;
				color: #333333;
			}
			.vip_info_rank {
				font-size: 28upx;
				line-height: 60upx;
				color: #333333;
				font-weight: bold;
			}
			.vip_info_three {
				font-size: 24upx;
				color: #333333;
				margin-top: 30upx;
			}
		}
		.vip_grade {
			position: absolute;
			right: 0;
			top: 30upx;
			width: 130upx;
			height: 42upx;
			background-color: rgba(0,0,0,0.6);
			border-top-left-radius: 21upx;
			border-bottom-left-radius: 21upx;
			color: #FFFFFF;
			font-size: 24upx;
			line-height: 42upx;
			padding-left: 20upx;
			box-sizing: border-box;
		}
	}
	.now_vip {
		width: calc(100% - 60upx);
		margin: 30upx auto;
		.now_vip_title {
			font-size: 32upx;
			color: #333333;
			font-weight: bold;
		}
		.now_vip_info {
			display: flex;
			justify-content: space-between;
		}
		.now_vip_content {
			display: flex;
			align-items: center;
			margin-top: 40upx;
			// image {
			// 	width: 96upx;
			// 	height: 80upx;
			// }
			.pic_one {
				width: 70upx;
				height: 70upx;
			}
			.pic_two {
				width: 90upx;
				height: 78upx;
			}
			.now_vip_content_info {
				margin-left: 10upx;
				.now_vip_content_info_o {
					font-size: 24upx;
					color: #000;
					
				}
				.now_vip_content_info_t {
					color: #f73e2f;
					font-size: 24upx;
				}
			}
		}
	}
</style>
